import React,{ PureComponent } from 'react'
import { WriterWrapper,WriterItem, WriterTitle } from "../styled";
import { connect } from 'react-redux'

class Writer extends PureComponent{
    render(){
        const { writerList } = this.props
        return <div>
            <WriterWrapper>
                <WriterTitle>
                    <p className="left">推荐作者</p>
                    <p className="right">
                        <i className='iconfont'>&#xe851;</i>
                        换一批
                    </p>
                </WriterTitle>
                {writerList.map((item) =>{
                    return <WriterItem key={item.get('id')}>
                        <img
                            className='writer-img'
                            src= {item.get('imgUrl')}
                            alt=""
                        />
                        <div className="middle">
                            <p className="title">{item.get('name')}</p>
                            <p className="desc">{item.get('desc')}</p>
                        </div>
                        <div className="right">
                            +关注
                        </div>
                    </WriterItem>
                    }
                )}
            </WriterWrapper>
        </div>
    }
}
const mapState = (state)=> ({
     writerList: state.getIn(['home','writerList'])
    })
export default connect(mapState,null)(Writer)
